<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.0.js"></script>

<script src="jquery-ui-1.10.4/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.4/themes/base/jquery-ui.css">

<script src="script.js"></script>

<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="calc_pane">
		<ul>
			<li><a href="#step-1">Шаг 1</a></li>
			<li><a href="#step-2">Шаг 2</a></li>
		</ul>
		<div id="step-1">
			<div id="window_wrap">
				<div id="vertical_slider_wrap">
					<input type="text" name="window_height" value="" id="window_height" />
					<div id="vertical_slider"></div>
				</div>
				<div id="window_canvas"></div>
				<div id="horizontal_slider_wrap">
					<div id="horizontal_slider"></div>
					<input type="text" name="window_width" value="" id="window_width" />
				</div>
			</div>
			<div id="params_wrap">
				<div id="window_type">
					<h3>Тип оконной конструкции</h3>
					<div id="window_type_canvas">
						<img id="window_type_canvas_img"
							src="images/1stvorki_1povorot.png" />
					</div>
					<div style="display: none" id="window_type_dialog">
						<div class="style_block" id="one_panel">
							<img src="images/1stvorki_1povorot.png" /> <img
								src="images/1stvorki_gluhoe.png" />
						</div>
						<div class="style_block" id="two_panel">
							<img src="images/2stvorki_gluhoe.png" /> <img
								src="images/2stvorki_1povorot.png" /> <img
								src="images/2stvorki_2povorot.png" />
						</div>
						<div class="style_block" id="three_panel">
							<img src="images/3stvorki_gluhoe.png" /> <img
								src="images/3stvorki_1povorot.png" /> <img
								src="images/3stvorki_2povorot.png" /> <img
								src="images/3stvorki_3povorot.png" />
						</div>
						<div class="style_block" id="door">
							<img src="images/balcon.png" />
						</div>
					</div>
				</div>
				<div>
					<h3>Профильная система</h3>
					<div id="profile_radio" class="radio_group">
						<input type="radio" id="profile1" name="profile"> <label
							for="profile1">Профиль 1</label> <input type="radio"
							id="profile2" name="profile"> <label for="profile2">Профиль
							2</label> <input type="radio" id="profile3" name="profile"> <label
							for="profile3">Профиль 3</label> <input type="radio"
							id="profile4" name="profile"> <label for="profile4">Профиль
							4</label>
					</div>
				</div>
				<div>
					<h3>Поворотно-откидной механизм открывания окна</h3>
					<div id="mech_radio" class="radio_group">
						<input type="radio" id="yes" name="mech"> <label for="yes">Да</label>
						<input type="radio" id="no" name="mech" checked="checked">
						<label for="no">Нет</label>
					</div>
				</div>
				<div>
					<h3>Ламинация</h3>
					<div id="laminat_canvas">
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
						<div class="laminat_item"></div>
					</div>
					<div class="clr_bth">  </div>
				</div>

			</div>
			<a href="#" id="button-step-2">Далее</a>
		</div>
		<div id="step-2">
			<h2>Параметры окна и дополнительные опции</h2>
				<div id="params_accordion">
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
					<h3>Дополнительные опции</h3>
					<div>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
						sadasd asd asd asd asd <br/>
					</div>
				</div>
		</div>
	</div>
</body>
</html>
